import styled from "styled-components"
import { useLocation, useNavigate } from 'react-router-dom';

import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { TabBar } from "antd-mobile";

const StyledFooter = styled.div`
& {
  width: 100vw;
  position: fixed;
  bottom: 0;
  /* display: flex;
  justify-content: space-around; */
  .item {
    color: blue;
  }
}
`
const tabs = [
  {
    key: '/',
    title: '首页',
    icon: <AppOutline />
  },
  {
    key: '/activity',
    title: '活动列表',
    icon: <MessageOutline />
  },
  {
    key: '/friend',
    title: '好友',
    icon: <UnorderedListOutline />
  },
  {
    key: '/person',
    title: '个人',
    icon: <UserOutline />
  },
]


const Footer = () => {
  const location = useLocation()
  const {pathname} = location
  const navigate = useNavigate()
  const setRouteActive = (value) => {
    navigate(value)
  }
  return (
    <StyledFooter>
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </StyledFooter>
  )
}

export default Footer
